import React, { useEffect, useState, useLayoutEffect } from "react";
import { CapsuleTabs, Tabs, InfiniteScroll } from "antd-mobile";
import { courseGet, categoryGet, ICourseParams } from "@/api/course";
import Course from "@/components/course";
import "./index.scss";
import { CategoryType, CourseType } from "@/types/course";
type Props = {};

let page = 2;
let obj: ICourseParams = {
  //列表查询条件数据包
  catelv1: `63743fa51d35662164b31ad1`,
};
export default function Explore({}: Props) {
  const [courseList, setCourseList] = useState<Array<CourseType>>([]);
  const [cateList, setCateList] = useState<Array<CategoryType>>([]);
  const [activeLv1, setActiveLv1] = useState<string>("0");
  const [hasMore, setHasMore] = useState<boolean>(false);
  useEffect(() => {
    console.log(activeLv1, parseInt(activeLv1));

    //课程分类
    categoryGet().then((res) => {
      let { results } = res.data;
      let arrLv1 = results.filter(
        (item: CategoryType) => item.fatherId === "0-0"
      );
      arrLv1.forEach((lv1: CategoryType) => {
        lv1.children = results.filter(
          (child: CategoryType) => child.fatherId === lv1.objectId
        );
      });
      // console.log(arrLv1);
      setCateList(arrLv1);
    });
    //课程列表
    loadData();
  }, []);
  //封装通用的数据请求方法
  const loadData = () => {
    page = 2;
    document.documentElement.scrollTop = 0;
    courseGet(obj).then((res) => {
      let { results } = res.data;
      setCourseList(results);
      if (results.length >= 8) {
        setHasMore(true);
      }
    });
  };
  //主菜单
  const handleCapsuleTabs = (key: string) => {
    setActiveLv1(key);
    let { objectId } = cateList[parseInt(key)];
    obj.catelv1 = objectId;
    loadData();
  };
  //子菜单
  const handleTabs = (key: string) => {
    let lv1 = cateList[parseInt(activeLv1)]; //主分类id
    if (key !== "0") {
      obj.catelv2 = lv1.children[parseInt(key) - 1].objectId;
    } else {
      delete obj.catelv2;
    }
    loadData();
  };
  const loadMore = async () => {
    console.log("触底了");
    courseGet(obj, page).then((res) => {
      let { results } = res.data;
      if (results.length) {
        let list = [...courseList, ...results];
        setCourseList(list);
        page++;
      }
      if (results.length < 8) {
        setHasMore(false);
      }
    });
  };
  return (
    <div className="foot-padding">
      <h1 className="title">探索</h1>
      <div className="my-stick">
        <CapsuleTabs activeKey={activeLv1} onChange={handleCapsuleTabs}>
          {cateList.map((item, index) => {
            return <CapsuleTabs.Tab title={item.cateName} key={index} />;
          })}
        </CapsuleTabs>
        <Tabs
          defaultActiveKey="0"
          stretch={false}
          activeLineMode="fixed"
          onChange={handleTabs}
        >
          <Tabs.Tab title="全部" key={0} />;
          {cateList.length
            ? cateList[parseInt(activeLv1)].children.map((item, index) => {
                return <Tabs.Tab title={item.cateName} key={index + 1} />;
              })
            : ""}
        </Tabs>
      </div>
      <Course list={courseList} isCollect={false} />
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={0} />
    </div>
  );
}
